<html>
<head>
  <title>Caret Browsing Options</title>
  <style>
    body {
      font-family: Lucida Grande, sans-serif, arial, helvetica;
      width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
    .banner {
      width: 100%;
      float: left;
    }
    .banner_left {
      padding: 8px;
      float: left;
    }
    .banner_right {
      padding: 8px;
    }
    .body_wrapper {
      width: 100%;
      float: left;
    }
    .body_left {
      border: 0;
      padding: 0;
      margin: 0;
      width: 50%;
      float: left;
    }
    .body_right {
      border: 0;
      padding: 0;
      margin: 0;
      width: 46%;
      float: left;
    }
    .body_inner {
      padding: 0 32px;
    }
    body.mac .nonmac {
      display: none;
    }
    body.nonmac .mac {
      display: none;
    }
    body.cros .noncros {
      display: none;
    }
    body.noncros .cros {
      display: none;
    }
    .key {
      border: 1px solid #666;
      color: #444;
      padding: 0.2em 0.8em;
      margin: 0 0.3em;
      background: #eee;
    }
    p {
      line-height: 1.6em;
    }
    fieldset {
      margin-bottom: 1em;
    }
    fieldset div {
      margin: 0.6em 0;
    }
    p.cros img {
      vertical-align: middle;
    }
  </style>
  <link href="caretbrowsing.css" rel="stylesheet" type="text/css">
  <script src="axs_testing.js"></script>
  <script src="traverse_util.js"></script>
  <script src="caretbrowsing.js"></script>
  <script src="options.js"></script>
</head>
<body caretbrowsing="on">

<div class="banner">
  <div class="banner_left">
    <img src="caret_128.png" class="logo" alt="">
  </div>
  <div class="banner_right">
    <h1 i18n-content="caret_browsing_appName"></h1>
    <p i18n-content="caret_browsing_subheading1"></p>
    <p i18n-content="caret_browsing_subheading2"></p>
  </div>
</div>

<div class="body_wrapper">
  <div class="body_left">
    <div class="body_inner">
      <h2 i18n-content="caret_browsing_keyboardCommands"></h2>

      <p class="noncros" i18n-content="caret_browsing_enableDisableNonCros"></p>
      <p class="cros" i18n-content="caret_browsing_enableDisableCros"></p>

      <div i18n-content="caret_browsing_navHelp"></div>

      <p class="nonmac" i18n-content="caret_browsing_moveByWordsNonMac"></p>
      <p class="mac" i18n-content="caret_browsing_moveByWordsMac"></p>

      <div i18n-content="caret_browsing_focusHelp"></div>
    </div>
  </div>
  <div class="body_right">
    <div class="body_inner">
      <h2></h2>

      <fieldset>
        <legend i18n-content="caret_browsing_whenEnabled"></legend>

        <div>
        <input type="radio" id="onenable_anim" name="onenable" value="anim">
        <label for="onenable_anim" i18n-content="caret_browsing_animation"></label>
        </div>

        <div>
        <input type="radio" id="onenable_flash" name="onenable" value="flash">
        <label for="onenable_flash" i18n-content="caret_browsing_flash"></label>
        </div>

        <div>
        <input type="radio" id="onenable_nothing" name="onenable" value="none">
        <label for="onenable_nothing" i18n-content="caret_browsing_noFeedback"></label>
        </div>

      </fieldset>      

      <fieldset>
        <legend i18n-content="caret_browsing_jump"></legend>

        <div>
        <input type="radio" id="onjump_anim" name="onjump" value="anim">
        <label for="onjump_anim" i18n-content="caret_browsing_animation"></label>
        </div>

        <div>
        <input type="radio" id="onjump_flash" name="onjump" value="flash">
        <label for="onjump_flash" i18n-content="caret_browsing_flash"></label>
        </div>

        <div>
        <input type="radio" id="onjump_nothing" name="onjump" value="none">
        <label for="onjump_nothing" i18n-content="caret_browsing_noFeedback"></label>
        </div>

      </fieldset>

    </div>
  </div>
</div>

</body>
</html>
